<template>

	<div class="cmall">
		<div class="cal_mall">
				<h3 class="cal_mall_tit"><img src="~/assets/img/cal_index_rmzw.png">展示位管理<span>注：每个展示位有效期为5天，购买成功后，无法取消或更换广告位。</span></h3>
				<ul class="calindexi3_list af">

          <!--  -->
            <li v-for="(i,index) in 4" class="calindexi3_item" :class="'i'+(index+1)" :key="index">
              <h5 class="tit">{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[index].servicename:''}}</h5>
              <p class="text">{{title.gj.oneTwoServiceData[index].servicename}}广告位购买{{title.gj.oneTwoServiceData[index].buyneedscore}}积分</p>
              <em class="num">{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[index].buyneedscore:''}} <span>积分</span></em>

              <div class="sc" @click="shouc(title.id,title.gj.oneTwoServiceData[index].id)">
                <div :class="title.gj['collectServiceData ']!=null&&title.gj['collectServiceData '].indexOf(title.gj.oneTwoServiceData[index].id)>-1?'sc_cg':'sc_pic'"></div>收藏
              </div>
              <a class="buy" href="JavaScript:;" @click="dkgm(title.id,title.gj.oneTwoServiceData[index].id)">立即购买</a>
             </li>
          <!--  -->
				</ul>
				<!-- 展位分类-----------s -->
					<div class="cal_mall_zwfl">
						<div class="cal_mall_zwfl_left">
							<h4 class="kind_title">展位分类</h4>
							<ul class="kind_list">
								<li @mouseover="taps(0)" class="on"><i class="i1"></i>{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[0].servicename:''}}</li>
								<li @mouseover="taps(1)" class=""><i class="i2"></i>{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[1].servicename:''}}</li>
								<li @mouseover="taps(2)" class=""><i class="i3"></i>{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[2].servicename:''}}</li>
								<li @mouseover="taps(3)" class=""><i class="i4"></i>{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[3].servicename:''}}</li>
							</ul>
						</div>
            <!-- 工商服务 -->
						<div class="cal_mall_zwfl_right" v-show="taps_index == 0">
							<h4 class="cal_mall_ctitle">{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[0].servicename:''}}</h4>
							<ul class="cal_mall_clist af">
								<li v-for="(data,i) in title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[0].twoServiceRes:[]" class="li" :class="i==0?'select':''" @mouseover="qh(1,i)">{{data.servicename}}</li>
							</ul>
							<div class="scroll-box">
								<div class="cal_mall_overflow">
									<ul class="cal_mall_ccontent af">
										<li class="item" v-for="(data,id) in title.gj.oneTwoServiceData?loadList3(title.gj.oneTwoServiceData[0].twoServiceRes[shuju1.one].id):[]" :class="'li'+id" :key="id">
											<em>{{data.servicename}}</em>
											<p>{{data.buyneedscore}}<span>积分</span></p>
                      <!-- <div :class="title.gj['collectServiceData ']!=null&&title.gj['collectServiceData '].indexOf(title.gj.oneTwoServiceData[index].id)>-1?'sc_cg':'sc_pic'"></div>收藏 -->
											<div class="sc" @click="shouc(title.id,data.id)">
                        <div :class="title.gj['collectServiceData ']!=null&&title.gj['collectServiceData '].indexOf(data.id)>-1?'sc_cg':'sc_pic'"></div>收藏
                      </div>
											<a href="JavaScript:;" @click="dkgm(title.id,data.id)">立即购买</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
            <!-- 工商服务 -->
            <!-- 财税服务 -->
            <div class="cal_mall_zwfl_right" v-show="taps_index == 1">
            	<h4 class="cal_mall_ctitle">{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[1].servicename:''}}</h4>
            	<ul class="cal_mall_clist af">
            		<li v-for="(data,i) in title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[1].twoServiceRes:[]" class="li" :class="i==0?'select':''" @mouseover="qh(2,i)">{{data.servicename}}</li>
            	</ul>
            	<div class="scroll-box">
            		<div class="cal_mall_overflow">
            			<ul class="cal_mall_ccontent af">
            				<li class="item" v-for="(data,id) in title.gj.oneTwoServiceData?loadList3(title.gj.oneTwoServiceData[1].twoServiceRes[shuju1.two].id):[]" :class="'li'+id" :key="id">
            					<em>{{data.servicename}}</em>
            					<p>{{data.buyneedscore}}<span>积分</span></p>
            					<div class="sc" @click="shouc(title.id,data.id)">
                        <div :class="title.gj['collectServiceData ']!=null&&title.gj['collectServiceData '].indexOf(data.id)>-1?'sc_cg':'sc_pic'"></div>收藏
                       </div>
            					<a href="JavaScript:;" @click="dkgm(title.id,data.id)">立即购买</a>
            				</li>
            			</ul>
            		</div>
            	</div>
            </div>
            <!-- 财税服务 -->
            <!-- 知识产权 -->
            <div class="cal_mall_zwfl_right" v-show="taps_index == 2">
            	<h4 class="cal_mall_ctitle">{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[2].servicename:''}}</h4>
            	<ul class="cal_mall_clist af">
            		<li v-for="(data,i) in title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[2].twoServiceRes:[]" class="li" :class="i==0?'select':''" @mouseover="qh(3,i)">{{data.servicename}}</li>
            	</ul>
            	<div class="scroll-box">
            		<div class="cal_mall_overflow">
            			<ul class="cal_mall_ccontent af">
            				<li class="item" v-for="(data,id) in title.gj.oneTwoServiceData?loadList3(title.gj.oneTwoServiceData[2].twoServiceRes[shuju1.three].id):[]" :class="'li'+id" :key="id">
            					<em>{{data.servicename}}</em>
            					<p>{{data.buyneedscore}}<span>积分</span></p>
            					<div class="sc" @click="shouc(title.id,data.id)">
                        <div :class="title.gj['collectServiceData ']!=null&&title.gj['collectServiceData '].indexOf(data.id)>-1?'sc_cg':'sc_pic'"></div>收藏
                       </div>
            					<a href="JavaScript:;" @click="dkgm(title.id,data.id)">立即购买</a>
            				</li>
            			</ul>
            		</div>
            	</div>
            </div>
            <!-- 知识产权 -->
            <!-- 资质商城 -->
            <div class="cal_mall_zwfl_right" v-show="taps_index == 3">
            	<h4 class="cal_mall_ctitle">{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[3].servicename:''}}</h4>
            	<ul class="cal_mall_clist af">
            		<li v-for="(data,i) in title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[3].twoServiceRes:[]" class="li" :class="i==0?'select':''" @mouseover="qh(4,i)">{{data.servicename}}</li>
            	</ul>
            	<div class="scroll-box">
            		<div class="cal_mall_overflow">
            			<ul class="cal_mall_ccontent af">
            				<li class="item" v-for="(data,id) in title.gj.oneTwoServiceData?loadList3(title.gj.oneTwoServiceData[3].twoServiceRes[shuju1.four].id):[]" :class="'li'+id" :key="id">
            					<em>{{data.servicename}}</em>
            					<p>{{data.buyneedscore}}<span>积分</span></p>
            					<div class="sc" @click="shouc(title.id,data.id)">
                        <div :class="title.gj['collectServiceData ']!=null&&title.gj['collectServiceData '].indexOf(data.id)>-1?'sc_cg':'sc_pic'"></div>收藏
                       </div>
            					<a href="JavaScript:;" @click="dkgm(title.id,data.id)">立即购买</a>
            				</li>
            			</ul>
            		</div>
            	</div>
            </div>
            <!-- 资质商城 -->
					</div>


				<!-- 展位分类-------------e -->
			</div>
      <div class="hh-login">
      <div class="tc">
         <span>×</span>
         {{tcmsg}}
       </div>
       <div class="gmtc" :class="goumai.select==0?'':'select'">
         <div class="ct">
           <h3>{{goumai.title}}(展示位)</h3>
           <p class="p1"><span>{{goumai.jifen}}</span>积分</p>
           <p class="p2">{{goumai.title}}(展示位)</p>
           <p class="p3">当前拥有积分:{{goumai.userjf}}</p>
           <a href="javascript:;" class="ljgm" @click="gmjf(title.id,goumai.id)">立即购买</a>
           <a href="javascript:;" class="close" @click="gmgb()"></a>
         </div>
       </div>
       </div>
	</div>


</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default{
    data(){
      return {
        title:null,
        tcmsg:'',
        sc_index:null,
        taps_index:0,
        tcmsg1:['收藏成功',''],
        tcmsg2:'取消收藏成功',
        shuju1:{
          one:0,
          two:0,
          three:0,
          four:0,
          five:0
        },
        goumai:{
          title:'',
          jifen:0,
          userjf:0,
          select:0,
          id:0
        },
        shows:''
       }
    },
    async asyncData ({req,params}){
      let a = req.headers.cookie;
      let cookie = '';
      if(a.indexOf('userinfoRes')!=-1){
        let b = a.split('userinfoRes=');
        let c = b[1].split(';');
        cookie = c[0];
      }
      let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
      let a3 = 'https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+cookie;

      let nh4 = await axios.get(a3);
      let data  = {nav:nh.data,id:cookie,gj:nh4.data};
      return { title: data}
    },
    computed: {
      loadList() {
        return (type) => {
          let newData = [];
          this.title.nav.threeServiceData.forEach(item => {
            if(item.pid == type) {
            newData.push(item);
          }
        });
          return newData;
        };
      },
      loadList3() {
        return (type) => {
          let newData = [];
          this.title.gj.threeServiceData.forEach(item => {
            if(item.pid == type) {
            newData.push(item);
          }
        });
          return newData;
        };
      },
      loadList2() {
        return (type) => {
          let newData = [];
          if(this.title.gj['collectServiceData ']){
            this.title.gj['collectServiceData '].forEach(item => {
              if(item == type) {
              newData.push(item);
            }
            });
          }
          return newData;
        };
      }
    },
    mounted:function(){
      function setCookie(cname,cvalue,exdays)
      {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
      }
       if(this.title.gr == 'go_signin'){
         this.$router.push('/Login');
         setCookie('userinfoRes','',-1);
       }else if(this.title.gr == 'userid_error'){
         this.$router.push('/Login');
         setCookie('userinfoRes','',-1);
       }else if(this.title.gr == 'userinfo_is_null'){
         this.$router.push('/Login');
         setCookie('userinfoRes','',-1);
       }else if(this.title.gr == 'userinfo_banuse'){
         this.$router.push('/Login');
         setCookie('userinfoRes','',-1);
       }
       else if(this.title.gr == 'serviceid_is_null'){
         window.open('/cMall',_self);
       } else if(this.title.gr == 'serviceid_error'){
         window.open('/cMall',_self);
       }else if(this.title.gr == 'serviceinfo_is_null'){
         window.open('/cMall',_self);
       }else if(this.title.gr == 'serviceinfo_banuse'){
         window.open('/cMall',_self);
       }


      $(document).ready(function(){
        $('.hh-xgzl .div .bj').click(function(){
          $(this).toggleClass('select');
          $(this).siblings('strong').toggleClass('select');
          $(this).parent().siblings('.ycd').toggleClass('select');
          $(this).parent().siblings('.tx').toggleClass('select');
          if($(this).text()=='编辑'){
            $(this).html('展开<i></i>');
          }else if($(this).text()=='展开'){
            $(this).html('编辑<i></i>');
          }
        });
        $('.cal_mall_clist li').hover(function(){
          $(this).siblings().removeClass('select');
          $(this).addClass('select');
        });
        $('.kind_list li').hover(function(){
          $(this).siblings().removeClass('on');
          $(this).addClass('on');
        });

        $('.hh-xgzl .div .bc').click(function(){
          $(this).parent().parent().children('strong').removeClass('select');
        });



      })
    },
    methods:{
      taps:function(index){
        this.taps_index = index
      },
      qh:function(e1,e2){
        console.log(e1,e2)
        if(e1==1){
          this.shuju1.one =e2;
        }else if(e1==2){
          this.shuju1.two =e2;
        }else if(e1==3){
          this.shuju1.three =e2;
        }else if(e1==4){
          this.shuju1.four =e2;
        }else if(e1==5){
          this.shuju1.five =e2;
        }
      },
      gmgb:function(){

        this.goumai.select = 0;
      },
      gmjf:function(e1,e2){
        var _this = this;
        var sj;
        sj = 'userid='+e1+'&serviceid='+e2;
        _this.$axios.post('/api'+'/PInterface/UserCenter/showNumBuyOperation',sj)
          .then(function(response){
            _this.goumai.select = 0;
            // alert(response.data);
            _this.tcmsg= response.data;
            $('.hh-login .tc').addClass('select');
            setTimeout(function(){//your codes
              window.location.reload()
            },800);


          });
      },
      dkgm:function(e1,e2){
        var _this = this;
        this.goumai.select = 1;
        _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/showNumBuyData',{
          params:{
            userid:e1,
            serviceid:e2
          }
        })
          .then(function(response){
            _this.goumai.title = response.data.servicename;
            _this.goumai.jifen = response.data.buyneedscore;
            _this.goumai.userjf = response.data.userscore;
            _this.goumai.id = e2;
          });
      },
      shouc:function(e1,e2){

         var _this = this;
        function setCookie(cname,cvalue,exdays)
        {
          var d = new Date();
          d.setTime(d.getTime()+(exdays*24*60*60*1000));
          var expires = "expires="+d.toGMTString();
          document.cookie = cname + "=" + cvalue + "; " + expires;
        }
        _this.$axios.post('api/PInterface/UserCenter/collectOperation','userid='+e1+'&serviceid='+e2
        )
          .then(function(response){
            // _this.xianqu = response.data;

            if(response.data == 'go_signin'){
              setCookie('userinfoRes','',-1);
              _this.$router.push('/');

            }else if(response.data=='userid_error'){
              setCookie('userinfoRes','',-1);
              _this.$router.push('/');
            }else if(response.data=='serviceid_error'){
              setCookie('userinfoRes','',-1);
              window.open('/PersonalCenter/','_self');
            }else if(response.data== '收藏成功'){
              _this.tcmsg= '收藏成功';
              $('.hh-login .tc').addClass('select');
              $('.tc').fadeIn(0);
              $('.tc').fadeOut(2500);
              _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+_this.title.id)
                .then(function(response){
                  _this.shows = e2
                  _this.title.gj = response.data;
                   _this.sc_index = true
                });
            }else if(response.data== '取消收藏成功'){
              $('.hh-login .tc').addClass('select');
              _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+_this.title.id)
                .then(function(response){
                  _this.title.gj = response.data;
                  _this.tcmsg= '取消收藏成功';
                  $('.hh-login .tc').addClass('select');
                  $('.tc').fadeIn(0);
                  $('.tc').fadeOut(2500);
                 _this.sc_index = false
                  console.log(response)
                });
            }

          });

      },

    }
  }
</script>

<style scoped="scoped">
  	.calindexi3_item{
  		margin-right: 31px;
  	}
  	.calindexi3_list{
  		margin-top: 44px;
  		margin-bottom: 57px;
  	}
    .calindexi3_item:last-child{
      margin-right: 0px;
    }
    .hh-login{
      height: auto;
    }
</style>
